import F2 from '../../../components/antvComponent/f2-canvas/lib/f2';
var regeneratorRuntime = require('../../../utils/runtime.js')
var api = require('../../../utils/api.js');
var $ = require('../../../utils/util.js');
var app = getApp();
var Store = app.Store 

var chart = null; 
var data = [] 
function initChart(canvas, width, height) {
  console.log(canvas, width, height) 
  chart = new F2.Chart({
    el: canvas,
    width,
    height
  }); 
  chart.source(data); 
  chart.tooltip({
    showCrosshairs: true,
    snap: true
  })  
  chart.area().position('time*value').color('type')
  chart.line().position('time*value').color('type')
  chart.interaction('pan');
  chart.render();
  return chart;
}

Page({
  data: {
    ycdm: '相电流', // 默认数据
    station: 0, // 站房
    ycxlm: '1#进线', // 设备
    time: '', // 时间
    now_data: [], // 当前数据
    max_data: [], // 最大数据
    active:0,
    isShowC: true, // 是否显示 
    dzTab:0, // 当前和最大
    times: [
      '00:00',
      '01:00',
      '02:00',
      '03:00',
      '04:00',
      '05:00',
      '06:00',
      '07:00',
      '08:00',
      '09:00',
      '10:00',
      '11:00',
      '12:00',
      '13:00',
      '14:00',
      '15:00',
      '16:00',
      '17:00',
      '18:00',
      '19:00',
      '20:00',
      '21:00',
      '22:00',
      '23:00'
    ], 
    nav: app.data.ycdmArr,
    isShowTime: false, // 是否显示时间弹框
    measuring: '', // 单位

  },
  async onLoad(options){  
    if ('info' in options) {
      var info = JSON.parse(options.info)
      console.log(info, '$$info$$') 
      this.setData({
        ycxlm: info.LineName,
        time: $.getCurrentDate().getFullDate(), // 时间
        station: info.station
      }) 
      wx.setNavigationBarTitle({
        title: info.LineName
      }) 
    } 

    var _cindex = this.data.nav.findIndex((item)=>{
      console.log(item, info.show_name, 'xxxxx')
      return item == info.show_name
    })

    if (_cindex>-1){
      this.setData({
        active: _cindex
      })
    } 

    var res = await this._getStatistical()
    this._initChart1('chartId_1', 'chart_1', res.data.list_data)
 
  },

  onPullDownRefresh() { //滑动到底部触发
    this._setSourceData(this.chart_1) // 获取图表数据
  },

  _initChart1(id, c, data) { 
    this.selectComponent('#' + id).init((canvas, width, height, F2) => {
      var chart = null
      chart = new F2.Chart({ el: canvas, width, height });
      chart.source(data, {

      });
      chart.area().position('time*value').color('type')
      chart.line().position('time*value').color('type')
      chart.tooltip({
        showCrosshairs: true,
        snap: true
      })
      chart.interaction('pan');
      // 定义x进度条
      chart.scrollBar({
        mode: 'x',
        xStyle: {
          offsetY: -5
        }
      });
      chart.interaction('pan');
      chart.render();
      this[c] = chart
      return this[c];
    })  
  },

  async _setSourceData(chart){ // 设置数据
    var res = await this._getStatistical()
    if (res.data.list_data.length==0)return 
    chart.source(res.data.list_data, res.data.list_time);
    chart.repaint();  // 更新图表！ 
  },
  
  dzTabHandle(e){
    var {index} = $.detail(e)
    this.setData({
      dzTab: index
    })
  },
  _getStatistical(){
    return new Promise((resolve)=>{
      var params = {
        ycdm: this.data.nav[this.data.active], // 默认数据
        station: this.data.station, // 站房
        ycxlm: this.data.ycxlm, // 设备
        time: this.data.time // 时间
      }
      wx.showLoading();
      api.$post(api.warningManage.getNewStatistical, params).then((res) => {
        wx.stopPullDownRefresh() // 接口数据请求完停止刷新
        wx.hideLoading();
        this.setData({
          now_data: res.data.now_data,
          max_data: res.data.max_data,
          measuring: res.data.measuring
        })
        resolve(res)
      })
    })
  },
   openTimeHandle(e) { // 打开时间弹框
    this.setData({
      isShowTime: true,
      isShowC: false
    })
  },

  timeCloseHandle() { // 时间弹框
    this.setData({
      isShowTime: false,
    }, () => {
      setTimeout(() => {
        this.setData({
          isShowC: true
        })
      }, 160)
    })
  },

  timeConfirmHandle(e) { // 时间组件传出来的数据
    var { time, key } = e.detail 
    this.setData({
      [key]: time.slice(0, 10)
    })
    this._setSourceData(this.chart_1) // 获取图表数据
  },
  onTabChange(e){
    this.setData({
      active: e.detail.index
    })
    this._setSourceData(this.chart_1) // 获取图表数据
  }
});
